/// <reference path="index.d.ts" />

import React from "react";
import { View, Text, Image, Switch, Input } from "@tarojs/components";





type ReducerProp = (state: ShareSetView.StateProp, action: Partial<ShareSetView.StateProp>) => ShareSetView.StateProp

type StyleProp = {
    containerStyle?: React.CSSProperties;
    contentViewStyle?: React.CSSProperties;
}
type StyleReducerProp = (state: StyleProp, action: Partial<StyleProp>) => StyleProp

const reduer = (state, action) => ({ ...state, ...action })

export const initialState: ShareSetView.StateProp = {
    qrcodeChecked: true,
    qrcodes: [1],
    qrcodeTips: '',
    infoChecked: true,
    infos: [0, 1, 2, 3, 4],
}

export default React.forwardRef<ShareSetView.Current, ShareSetView.Prop>((props, ref) => {

    const [viewModel, setViewModel] = React.useReducer<ReducerProp>(reduer, initialState)

    const [styleState, styleDispatch] = React.useReducer<StyleReducerProp>(
        reduer,
        {
            containerStyle: styles.container,
            contentViewStyle: styles.contentViewStyle
        })

    React.useImperativeHandle(ref, () => ({
        show: () => {
            show()
        },
        hide: () => {
            hide()
        }
    }), [])





    const show = () => {
        styleDispatch({
            containerStyle: {
                ...styleState.containerStyle,
                visibility: 'visible',
                transition: 'visibility 0.35s ease-in'
            },
            contentViewStyle: {
                ...styleState.contentViewStyle,
                transform: `translateY(-${contentViewRef?.current?.clientHeight}px)`,
                transition: 'transform 0.35s ease-in'
            }
        })
    }

    const hide = () => {
        styleDispatch({
            containerStyle: {
                ...styleState.containerStyle,
                visibility: 'hidden',
                transition: 'visibility 0.25s ease-out'
            },
            contentViewStyle: {
                ...styleState.contentViewStyle,
                transform: 'translateY(0px)',
                transition: 'transform 0.25s ease-out'
            }
        })
    }




    const contentViewRef = React.useRef<any>()

    return (
        <View
            style={styleState.containerStyle} onClick={e => {
                hide()
                e.stopPropagation()
            }}
        >

            <View style={styleState.contentViewStyle} ref={contentViewRef} onClick={e => {
                // console.log(e)
                e.stopPropagation()
            }}>

                {/* 头部标题 */}
                <View style={{ display: 'flex', height: '44px', justifyContent: 'center', alignItems: 'center', position: 'relative' }}>
                    <Text style={{ fontSize: '16px', color: '#000' }}>分享设置</Text>

                    <View style={{ height: '100%', width: '50px', position: 'absolute', right: '0', display: 'flex', justifyContent: 'center', alignItems: 'center' }}
                        onClick={e => {
                            // console.log(e)
                            hide()
                        }}
                    >
                        <Image src={require('./delete.png')} style={{ width: '14px', height: '14px' }} />
                    </View>
                </View>




                {/* 二维码 */}
                <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', margin: '15px' }}>
                    <Text style={{ fontSize: '14px', color: '#000', fontWeight: 'bold' }}>二维码</Text>
                    <View style={{ display: 'flex', alignItems: 'center' }} >
                        <Text style={{ fontSize: '12px', color: '#B3B3B3', marginRight: '5px' }}>{viewModel.qrcodeChecked ? '展示' : '隐藏'}</Text>
                        <Switch
                            checked={viewModel.qrcodeChecked}
                            color='#3F62DC'
                            onChange={checked => {
                                let qrcodeChecked = checked.detail.value
                                if (!qrcodeChecked) {
                                    setViewModel({ qrcodes: [] })
                                }
                                setViewModel({ qrcodeChecked: checked.detail.value })
                                styleDispatch({
                                    contentViewStyle: {
                                        ...styleState.contentViewStyle,
                                        transform: `translateY(-${contentViewRef?.current?.clientHeight}px)`,
                                        transition: 'transform 0.35s ease-in'
                                    }
                                })
                            }} />
                    </View>
                </View>
                <View style={{ display: 'flex', alignItems: 'center', margin: '0 15px' }}>
                    {['智能名片', '企业微信'].map((i, idx) => {
                        let has = viewModel.qrcodes.includes(idx)
                        return (
                            <View key={`sg-2-${idx}`} style={{
                                display: 'flex', padding: '5px 20px', marginRight: '15px',
                                justifyContent: 'center', alignItems: 'center',
                                border: has ? 'solid 1px #3F76E3' : 'solid 1px #DDDDDD',
                                borderRadius: '3px',
                                overflow: 'hidden',
                                position: 'relative'
                            }}
                                onClick={() => {
                                    if (viewModel.qrcodeChecked) setViewModel({ qrcodes: [idx] })
                                }}
                            >
                                <Text style={{ fontSize: '12px', color: has ? '#3F76E3' : '#DDDDDD', }}>{i}</Text>
                                <Image src={require('./at.png')} style={{ width: '16px', height: '14px', position: 'absolute', bottom: 0, right: 0, opacity: has ? 1 : 0 }} />
                            </View>
                        )
                    }
                    )}
                </View>


                {/* 二维码提示语 */}
                {
                    viewModel.qrcodeChecked &&
                    <>
                        <View style={{ margin: '15px' }}><Text style={{ fontSize: '14px', color: '#000', fontWeight: 'bold' }}>二维码提示语</Text></View>
                        <View style={{ display: 'flex', margin: '0 15px', height: '30px' }}>
                            <Input
                                style={{ flexGrow: 1, lineHeight: '30px', fontSize: '12px', padding: '0px 10px', border: 'solid 1px #DDDDDD', borderRadius: '3px', display: 'flex', alignItems: 'center' }}
                                placeholder='请输入二维码提示语'
                                value={viewModel.qrcodeTips}
                                onInput={val => {
                                    setViewModel({ qrcodeTips: val.detail.value })
                                }}
                            />
                        </View>
                    </>
                }





                {/* 二维码 */}
                <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', margin: '15px' }}>
                    <Text style={{ fontSize: '14px', color: '#000', fontWeight: 'bold' }}>个人信息（可多选）</Text>
                    <View style={{ display: 'flex', alignItems: 'center' }} >
                        <Text style={{ fontSize: '12px', color: '#B3B3B3', marginRight: '5px' }}>{viewModel.infoChecked ? '展示' : '隐藏'}</Text>
                        <Switch
                            checked={viewModel.infoChecked}
                            color='#3F62DC'
                            onChange={checked => {
                                if (!checked.detail.value) {
                                    setViewModel({ infos: [] })
                                }
                                setViewModel({ infoChecked: checked.detail.value })
                            }} />
                    </View>
                </View>
                <View style={{ display: 'flex', alignItems: 'center', margin: '0 15px', flexWrap: 'wrap' }}>
                    {['头像', '姓名', '公司', '职位', '电话'].map((i, idx) => {
                        let has = viewModel.infos.includes(idx)
                        return (
                            <View key={`sg-3-${idx}`} style={{
                                display: 'flex', padding: '5px 20px', marginRight: '15px', marginBottom: '15px',
                                justifyContent: 'center', alignItems: 'center',
                                border: has ? 'solid 1px #3F76E3' : 'solid 1px #DDDDDD',
                                borderRadius: '3px',
                                overflow: 'hidden',
                                position: 'relative'
                            }}
                                onClick={() => {
                                    if (viewModel.infoChecked) {
                                        let infos = [...viewModel.infos];
                                        if (has) {
                                            infos = infos.filter(j => j != idx)
                                        } else {
                                            infos.push(idx)
                                        }
                                        setViewModel({ infos })
                                    }
                                }}
                            >
                                <Text style={{ fontSize: '12px', color: has ? '#3F76E3' : '#DDDDDD', }}>{i}</Text>
                                <Image src={require('./at.png')} style={{ width: '16px', height: '14px', position: 'absolute', bottom: 0, right: 0, opacity: has ? 1 : 0 }} />
                            </View>
                        )
                    })}




                </View>

                <View style={{ height: '85px', width: '100%', display: 'flex', boxShadow: '0 -2px 5px  #F3F3F3' }}>
                    <View style={{ flexGrow: 1, margin: '15px', borderRadius: '8px', display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: '#3F76E3' }}

                        onClick={e => {
                            e.stopPropagation()
                            props.onOk(viewModel)
                            hide()
                        }}
                    >
                        <Text style={{ fontSize: '16px', color: '#FFFFFF' }}>确认</Text>
                    </View>
                </View>

            </View>
        </View>

    )
})



const styles: Record<string, React.CSSProperties> = {
    container: {
        position: 'fixed',
        zIndex: 99999,
        width: '100%',
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: '#00000055',
        visibility: 'hidden',
        // visibility: 'visible',
        overflow: 'hidden'
    },
    contentViewStyle: {
        position: 'absolute',
        top: '100%',
        width: '100%',
        backgroundColor: 'white'
    }
}



